<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>通知公告</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
body{ background: #f3f4f9; }
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 50px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 50px; height: 50px; }
.t-title{ display:block; line-height: 50px;  text-align: center;  }
/*审核,通知 导航*/
.con-tab{position: relative; height: 42px; margin-top:2px; background: #fff;  }
.con-tab>div{ float: left; height: 100%; width: 50%;  }
.con-tab a{ display: block; margin:0 auto; width: 100px; height:40px; line-height:40px; text-align: center; }
.con-tab a.active{ border-bottom:2px solid #209afe;  color: #209afe; }
.con-tab .right{ position: absolute;top:5px;width: 16px;line-height: 16px; border-radius: 50%; background:red; color: #fff; text-align:center;  font-size: 12px; font-weight: 600;}
.con-tab .xian{ position: absolute;left: 50%;top:6px; height: 30px; width:0; border-left: 1px solid #dcdcdc; }
/*内容*/
.page-cont{  padding:10px 0 100px 0; overflow: hidden; overflow-y: auto; }
.p-list1{ overflow: hidden; padding:10px 0;  width: 100%;  margin-bottom: 12px; background: #fff;  }
.p-list1 a{ color: inherit; }
.p-list1 p{ height: 30px; width: 100%; line-height: 30px; padding:0 18px; font-size: 15px; }
.p-list1 .p-title{  font-size: 17px; color: #ff7f02; }
.p-list1 .p-time{  font-size: 14px; color: #767676; }
.p-list1 .p-info{  padding:3px 18px; font-size: 13px; color: #ff7f02; }
.p-list1 .p-name{display: inline-block; width:70px; font-size: 14px; color: #999; }
.p-list1 .p-btns{  width: 100%; margin:10px 0;  width: 100%;  box-sizing: border-box; text-align: right; }
.p-list1 .p-btns a{ margin:15px 18px; padding:2px 10px;  border-radius: 2px; text-align: center; font-size: 15px; }
.p-list1 .p-btns .p-yes{  border: 1px solid #ff020e; color: #ff020e; }
.p-list1 .p-btns .p-no{  border: 1px solid #18a814; color: #18a814; }
.p-list1 .p-btns .p-y{ margin:0 0 15px 15px; color: #209afe; }
.p-list1 .p-btns .p-n{ margin:0 0 15px 15px; color: #ff020e; }
/*辅助类*/
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }

</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
              <div class="page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>
                      <a  class="g-other"></a>
                      <span class="t-title">通知公告</span>  
              </div>

              <div class="con-tab" >
                      <div>
                            <a id="daiban">待办<span class="right " id="daiban_num"></span></a>
                      </div>
                      <span class="xian"></span>
                      <div>
                            <a class="active"  id="tongzhi">通知<span class="right " id="tongzhi_num">1</span></a>            
                      </div>
             </div>


      <div class="weui-tab__bd page-cont">
            <div id="cont-wrap">

            </div>
      </div>

</div>
</body>
<script>
// 数据渲染
var reSult =["待办","已拒绝","已同意"];
// arr 数组中元素result属性值对应 reSult 数组下标元素
//  0->待办     1->已拒绝     2->已同意
var arr=[
    {   
        time:"2018-09-22 18:22:23",
        type:"国庆节",
        m:"请假",
        title:"国庆节放假通知",
        result:0,
        t1:"2018-10-1 08:00:00",
        t2:"2018-10-7 18:00:00",
        href:"../pages/xiangqing.html"
     }
];

// 数据渲染封装函数
var strarr1,strarr2,n,m;
function info_all( ){
      if( !!arr ){
      strarr1=[];
      strarr2=[];
      n=0;
      m=0;
          $.each(arr,function(i,v){
                if(v.result == 0){
                        strarr1.push(
                            '<div class="p-list1">'+'<a href="'+v.href+'">'+
                                     '<p class="p-title">通知 <span class="p-time right">'+v.time+'</span></p>'+
                                     '<p>'+v.title+'</p>'+
                                     '<p><span class="p-name">类型: </span><span>'+v.type+'</span></p>'+
                                     '<p><span class="p-name">开始时间: </span><span>'+v.t1+'</span></p>'+
                                     '<p><span class="p-name">结束时间: </span><span>'+v.t2+'</span></p>'+
                                     '<div class="p-btns">'+            
                                            // '<a class="right p-no" onclick="too('+i+',1,this)">同意</a>'+
                                            // '<a class="right p-yes" onclick="too('+i+',2,this)">拒绝</a>'+
                                     '</div>'+'</a>' +                          
                             '</div>'
                        );  
                        n++;
                  }else{
                        var x,y;
                        if( v.result == 1){  x = '<a class="left p-y" >已同意</a>' ; y = "已通过审核" }
                        if( v.result == 2){  x = '<a class="left p-n" >已拒绝</a>' ; y = "未通过审核" }
                              strarr2.push(
                                  '<div class="p-list1">'+'<a href="'+v.href+'">'+
                                           '<p>'+v.title+'</p>'+
                                           '<span class="p-info" >你提交的'+v.m+'申请'+y+',请知晓</span>'+
                                           '<p><span class="p-name">请假类型: </span><span>'+v.type+'</span></p>'+
                                           '<p><span class="p-name">开始时间: </span><span>'+v.t1+'</span></p>'+
                                           '<p><span class="p-name">结束时间: </span><span>'+v.t2+'</span></p>'+
                                           '<div class="p-btns">'+x+'</div>'+   '</a>' +                       
                                   '</div>'
                              );  
                        m++;
                  }       
            })
          // 初始化显示
          if(m != 0){ 
               $("#daiban_num").show();
               $("#daiban_num").text( m ); 
          }else{
               $("#daiban_num").hide();
          }
          if( n !=0){
               $("#tongzhi_num").show();
               $("#tongzhi_num").text( n );
          }else{
               $("#tongzhi_num").hide();
          }
          $("#cont-wrap").html( strarr1.join(""));
      }
}
info_all( )


$("#tongzhi").click(function(){
     $("#cont-wrap").html( strarr1.join(""));
     $("#daiban").removeClass("active");
     $(this).addClass("active");
})
$("#daiban").click(function(){
     $("#cont-wrap").html( strarr2.join(""));
     $("#tongzhi").removeClass("active");
     $(this).addClass("active");
})



</script>
</html>